<template>
  <div class="home">
    <NavigationBar />
    <div class="section-header">
  <h2 class="section-title">欢迎来到贝贝回家宠物领养中心</h2>
  <p class="section-subtitle">寻找你的完美伴侣，给它们一个温暖的家</p>
</div>
    <!-- 轮播图 -->
    <div class="carousel">
      <div class="carousel-container">
        <img 
          v-for="(img, index) in carouselImages" 
          :key="index"
          :src="getImageUrl(img)"
          :alt="'图片' + (index + 1)"
          class="carousel-image"
          :class="{ active: currentIndex === index }"
        />
      </div>
      <div class="carousel-indicators">
        <span 
          v-for="(_, index) in carouselImages"
          :key="index"
          class="indicator"
          :class="{ active: currentIndex === index }"
          @click="goToImage(index)"
        />
      </div>
    </div>

    <!-- 宠物领养区 -->
    <section class="adoption-section">
      <div class="pet-adoption-container">
        <div class="filter-controls">
          <button 
            v-for="filter in filters"
            :key="filter.value"
            class="filter-btn"
            :class="{ active: filterType === filter.value }"
            @click="filterPets(filter.value)"
          >
            {{ filter.label }}
          </button>
        </div>

        <div v-if="displayedPets.length > 0" class="pet-grid">
          <div 
            v-for="pet in displayedPets"
            :key="pet.id"
            class="pet-card"
            @mouseenter="hoveredPet = pet.id"
            @mouseleave="hoveredPet = null"
          >
            <div class="card-image">
              <img :src="getImageUrl(pet.image)" :alt="pet.name" />
              <div v-if="hoveredPet === pet.id" class="image-overlay">
                <router-link 
                  :to="{ name: 'PetAdoption', params: { petId: pet.id } }"
                  class="view-btn"
                >
                  查看详情
                </router-link>
              </div>
            </div>
            <div class="card-body">
              <h3>{{ pet.name }}</h3>
              <div class="pet-meta">
                <span>年龄: {{ pet.age }}岁</span>
                <span>性别: {{ pet.gender === 'male' ? '雄性' : '雌性' }}</span>
              </div>
              <p class="pet-desc">{{ pet.description }}</p>
            </div>
          </div>
        </div>

        <div v-else class="empty-state">
          <span class="empty-icon">🐾</span>
          <p>暂时没有符合条件的宠物</p>
        </div>

        <button class="more-btn" @click="goToPetAdoption">
          查看更多宠物
          <svg class="arrow-icon" viewBox="0 0 24 24">
            <path d="M5 12h14M12 5l7 7-7 7"/>
          </svg>
        </button>
      </div>
    </section>

    <Footer />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import NavigationBar from '@/components/NavigationBar.vue'
import Footer from '@/components/Footer.vue'
import { pets } from '@/data/petsData.js'

const router = useRouter()

// 响应式数据
const currentIndex = ref(0)
const filterType = ref('all')
const hoveredPet = ref(null)
const carouselImages = ['666.jpg', '444.jpg', '333.jpg']
const filters = [
  { value: 'all', label: '全部' },
  { value: 'cat', label: '猫咪' },
  { value: 'dog', label: '狗狗' }
]

// 计算属性
const displayedPets = computed(() => {
  const randomPets = getRandomPets(pets, 6)
  return filterType.value === 'all' 
    ? randomPets 
    : randomPets.filter(pet => pet.type === filterType.value)
})

// 方法
const getImageUrl = (imageName) => {
  return new URL(`/src/assets/images/${imageName}`, import.meta.url).href
}

const getRandomPets = (pets, count) => {
  const shuffled = [...pets].sort(() => 0.5 - Math.random())
  return shuffled.slice(0, count)
}

const filterPets = (type) => {
  filterType.value = type
}

const goToPetAdoption = () => {
  router.push({ name: 'PetAdoption' })
}

// 轮播图逻辑
let carouselInterval
const images = ref([])

const initImages = () => {
  images.value = document.querySelectorAll('.carousel-image')
  showCurrentImage()
}

const showCurrentImage = () => {
  images.value.forEach((img, index) => {
    img.style.opacity = index === currentIndex.value ? 1 : 0
  })
}

const goToImage = (index) => {
  currentIndex.value = index
  showCurrentImage()
  resetCarousel()
}

const startCarousel = () => {
  carouselInterval = setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % images.value.length
    showCurrentImage()
  }, 5000)
}

const resetCarousel = () => {
  clearInterval(carouselInterval)
  startCarousel()
}

// 生命周期钩子
onMounted(() => {
  initImages()
  startCarousel()
})
</script>

<style lang="css">
/* 全局变量 */
:root {
  --primary: #4a7c59;
  --primary-light: #85b88d;
  --secondary: #d4a373;
  --accent: #6bb39b;
  --light: #f9f7f0;
  --light-pure: #ffffff;
  --dark: #333333;
  --gray: #6a6a6a;
  --gray-light: #e8e5dd;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 基础样式 */
.home {
  font-family: 'Noto Sans SC', 'PingFang SC', sans-serif;
  color: var(--dark);
  background: linear-gradient(to bottom, var(--light), var(--light-pure));
  min-height: 100vh;
  text-align: center;
  padding: 2rem 0;
}

/* 轮播图 */
.carousel {
  position: relative;
  width: 80%;
  max-width: 1200px;
  margin: 2rem auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.carousel-container {
  position: relative;
  aspect-ratio: 16/9;
}

.carousel-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.carousel-image.active {
  opacity: 1;
}

.carousel-indicators {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.75rem;
  z-index: 10;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: var(--transition);
}

.indicator.active {
  background-color: var(--primary-light);
  transform: scale(1.2);
}

/* 领养区域 */
.section-header {
  text-align: center;
  margin: 3rem 0;
  padding: 0 1rem;
}

.section-title {
  font-size: 2.5rem;
  color: #4a7c59; /* 自然绿色 */
  margin-bottom: 1rem;
  font-weight: 600;
  position: relative;
  display: inline-block;
  font-family: 'Noto Sans SC', 'PingFang SC', sans-serif;
  letter-spacing: 1px;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #4a7c59, #6bb39b); /* 绿色渐变 */
  border-radius: 2px;
}

.section-subtitle {
  font-size: 1.25rem;
  color: #6a6a6a; /* 深灰色 */
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
  font-weight: 400;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }
  
  .section-subtitle {
    font-size: 1.1rem;
    padding: 0 1rem;
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: 1.8rem;
    letter-spacing: 0;
  }
  
  .section-title::after {
    width: 60px;
    bottom: -8px;
  }
}

.section-header h2 {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 1rem;
  font-weight: 600;
}

.section-header p {
  font-size: 1.25rem;
  color: var(--gray);
}

.pet-adoption-container {
  background-color: var(--light-pure);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2.5rem;
}

.filter-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.filter-btn {
  background-color: transparent;
  color: var(--primary);
  border: 2px solid var(--primary-light);
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.filter-btn:hover, .filter-btn.active {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* 宠物卡片 */
.pet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.pet-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  position: relative;
}

.pet-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

.card-image {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.pet-card:hover .card-image img {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pet-card:hover .image-overlay {
  opacity: 1;
}

.view-btn {
  background-color: var(--light-pure);
  color: var(--primary);
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition);
}

.view-btn:hover {
  background-color: var(--primary);
  color: white;
}

.card-body {
  padding: 1.5rem;
  text-align: left;
}

.card-body h3 {
  font-size: 1.25rem;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.pet-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  color: var(--gray);
  font-size: 0.9rem;
}

.pet-desc {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.6;
  display: -webkit-box;
  /* -webkit-line-clamp: 3; */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 空状态 */
.empty-state {
  padding: 3rem 0;
  text-align: center;
}

.empty-icon {
  width: 80px;
  height: 80px;
  opacity: 0.2;
  margin-bottom: 1rem;
}

.empty-state p {
  color: var(--gray);
  font-size: 1.1rem;
}

/* 更多按钮 */
.more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--primary);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  margin-top: 2rem;
  transition: var(--transition);
}

.more-btn:hover {
  background-color: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.arrow-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .carousel {
    width: 90%;
  }
  
  .pet-adoption-container {
    width: 95%;
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .section-header h2 {
    font-size: 2rem;
  }
  
  .section-header p {
    font-size: 1.1rem;
  }
  
  .pet-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 480px) {
  .carousel {
    width: 95%;
    border-radius: 12px;
  }
  
  .filter-controls {
    gap: 0.5rem;
  }
  
  .filter-btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  
  .more-btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    margin-top: 1.5rem;
  }
}
</style>